<template>
	<el-card class="box-card">
		<el-button type="text" @click="dialogFormVisible = true">前往实名认证</el-button>

		<!-- 账户类型选择的对话框 -->
		<el-dialog title="实名认证-账户类型选择" :visible.sync="dialogFormVisible" :before-close="reset">
			<el-row :gutter="20" class="zj">
				<el-radio-group v-model="cards.accountid" size="mini" style="margin-left: 13px" fill="#a0a0ff"
					v-for="(item,index) in AccountType" :key="index">

					<el-radio-button :label="item.accountid">
						<h2>{{item.account}}
						</h2>
						<el-image style="width: 100px; height: 100px" :src="imgurl + item.accountimg"></el-image>
					</el-radio-button>

				</el-radio-group>
			</el-row>
			<el-button type="danger" size="medium" style="width: 100%; padding: 10px 16px; font-size: 20px"
				@click="toOne">认证申请</el-button>
			<div class="container" style="margin-top: 20px">
				<div class="row clearfix">
					<div class="col-md-12 column">
						<div id="footer">
							<div class="footerNav">
								<a rel="nofollow" href="http://www.atguigu.com">关于我们</a> |
								<a rel="nofollow" href="http://www.atguigu.com">服务条款</a> |
								<a rel="nofollow" href="http://www.atguigu.com">免责声明</a> |
								<a rel="nofollow" href="http://www.atguigu.com">网站地图</a> |
								<a rel="nofollow" href="http://www.atguigu.com">联系我们</a>
							</div>
							<div class="copyRight">
								Copyright ?2017-2017atguigu.com 版权所有
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>


		<!-- 填写基本信息的对话框 -->
		<el-dialog title="实名认证-申请" :visible.sync="oneDialog" width="40%">
			<!--实名认证申请的表单1 -->
			<el-form ref="addref" :rules="addrules" :model="cards" label-width="100px">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="cards.name" placeholder="请填写姓名" style="width: 60%;"></el-input>
				</el-form-item>
				<el-form-item label="身份证号码" prop="idcard">
					<el-input v-model="cards.idcard" placeholder="请填写个人身份证号" style="width: 60%;"></el-input>
				</el-form-item>
			</el-form>
			<!-- 取消和确定按钮 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="reset" type="info">取消</el-button>
				<el-button @click="back" type="primary">上一步</el-button>
				<el-button @click="toTwo" type="primary">下一步</el-button>
			</span>
		</el-dialog>

		<!-- 实名认证第二步 -->
		<el-dialog title="实名认证-资质图片上传" :visible.sync="twoDialog" width="40%">
			<!--实名认证申请的表单1 -->
			<h2 style="color: #3C8DBC;">上传资质图片</h2>
			<el-form ref="addref" :rules="addrules" :model="cards" label-width="100px">
				<el-form-item label="">
					<!-- 图片上传 -->
					<!-- action:默认上传的路径 
	 		list-type：上传组件的样式
	 		on-preview：图片放大函数
	 		on-remove：图片移除的函数
	 		on-success：上传成功后的函数-->
					<el-upload action="http://localhost:8888/crowdfunding_system_war_exploded/upload"
						list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
						:on-success="addSuccess">
						<i class="el-icon-plus"></i>
					</el-upload>
					<!-- 图片放大后的对话框 -->
					<el-dialog :visible.sync="imgDialog">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>
			</el-form>
			<!-- 取消和确定按钮 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="reset" type="info">取消</el-button>
				<el-button @click="backOne" type="primary">上一步</el-button>
				<el-button @click="toThree" type="primary">下一步</el-button>
			</span>
		</el-dialog>


		<!-- 短信认证 -->
		<el-dialog title="实名认证-电话验证" style="font-style: inherit; " :visible.sync="threeDialog" width="40%">
			<el-form ref="addref" :rules="addrules" label-width="100px" :model="cards">
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="cards.phone" placeholder="请填写验证所用手机号" style="width: 60%;"></el-input>
					<el-button type="warning" icon="el-icon-search" @click="fa" style="float: right;">获取验证码</el-button>
				</el-form-item>
				<el-form-item label="验证码">
					<el-input v-model="cards.yzm" placeholder="请填写短信中收到的验证码" style="width: 60%;"></el-input>
					<el-button type="warning" icon="el-icon-search" @click="fa" style="float: right;">请重新获取</el-button>
				</el-form-item>
			</el-form>
			<!-- 取消和确定按钮 -->
			<span slot="footer" class="dialog-footer">
				<div align="left">
					<el-button @click="reset" type="info">取消</el-button>
					<el-button @click="backTwo" type="primary">上一步</el-button>
					<el-button @click="addCard" type="success" style="float: right;">申请完成</el-button>
				</div>

			</span>
		</el-dialog>
	</el-card>
</template>

<script>
	import qs from 'qs';
	export default {

		data() {
			// 自定义邮箱验证的规则
			var checkEmail = ((rule, value, callback) => {
				if (!value) { //value为空
					return callback(new Error('邮箱不能为空'))
				}
				//判断是否符合邮箱的正则表达式
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
				if (!reg.test(value)) {
					return callback(new Error('邮箱格式不合法'))
				}
				return callback();
			});
			var checkMobile = ((rule, value, callback) => {
				if (!value) { //value为空
					return callback(new Error('手机号不能为空'))
				}
				//判断是否符合手机号的正则表达式
				var reg = /^[1][0-9]{10}$/
				if (!reg.test(value)) {
					return callback(new Error('手机号格式不合法'))
				}
				return callback();
			});
			// 身份证号正则
			var checkIdCard = ((rule, value, callback) => {
				if (!value) { //value为空
					return callback(new Error('身份证号不能为空'))
				}
				//判断是否符合手机号的正则表达式
				var reg =
					/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
				if (!reg.test(value)) {
					return callback(new Error('身份证号格式不合法'))
				}
				return callback();
			});
			return {
				// 短信验证
				// 实名认证申请
				cards: {
					userid: '',
					accountid: '',
					name: '',
					idcard: '',
					phone: '',
					yzm: '',
					zyzm: '',
					comfirmimg: '',
				},
				radio: "",
				AccountType: [],
				imgurl: 'http://localhost:8888/crowdfunding_system_war_exploded/showImg?filename=',
				// 实名认证账号类型选择对话框
				dialogFormVisible: false,
				// 实名认证第一步对话框
				oneDialog: false,
				// 实名认证第二步上传资质图片的对话框
				twoDialog: false,
				// 图片预览的路径
				dialogImageUrl: '',
				// 图片放大对话框
				imgDialog: false,
				// 实名认证第三步对话框
				threeDialog: false,
				addrules: {
					idcard: [{
						validator: checkIdCard,
						trigger: 'blur'
					}],
					phone: [{
						validator: checkMobile,
						trigger: 'blur'
					}],
					email: [{
						validator: checkEmail,
						trigger: 'blur'
					}]
				},
			}
		},
		methods: {
			async selectAccountType() {
				var res = await this.$http.post("/selectAllAccountType");
				if (res.data.code == 200) {
					this.AccountType = res.data.data;
					console.log(this.AccountType)
				} else {
					this.$message.info(res.data.message);
				}
			},
			toOne() {
				if (this.cards.accountid == 0) {
					alert("请选择账户类型")
				} else {

					this.dialogFormVisible = false;
					this.oneDialog = true;
				}
				console.log(this.cards.accountid)

			},
			toTwo() {
				if (this.cards.name == '' || this.cards.idcard == '') {
					alert("请填写数据")
					this.oneDialog = true
				} else {
					this.$refs.addref.validate(async (bo) => {
						if (!bo) {
							alert("格式不正确，请检查")
							this.oneDialog = true
						} else {
							this.oneDialog = false;
							this.twoDialog = true;
						}
					})
				}
			},
			toThree() {
				if (this.cards.comfirmimg == '') {
					alert("请上传资质图片")
					this.twoDialog = true
				} else {
					this.twoDialog = false;
					this.threeDialog = true;
				}
			},
			back() {
				this.oneDialog = false;
				this.dialogFormVisible = true;
			},
			backOne() {
				this.twoDialog = false;
				this.oneDialog = true;
			},
			backTwo() {
				this.threeDialog = false;
				this.twoDialog = true;
			},
			reset() {
				this.dialogFormVisible = false
				this.oneDialog = false
				this.twoDialog = false
				this.threeDialog = false
				this.imgDialog = false
				this.$refs.addref.resetFields();
			},
			// 图片移除
			handleRemove(file, fileList) {
				// console.log(file, fileList);
				this.cards.comfirmimg = '';
			},
			// 图片放大
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.imgDialog = true;
			},
			// 图片上传成功后的函数
			addSuccess(response) {
				if (response.code == 200) {
					this.cards.comfirmimg = response.message;
				}
			},

			addCard() {
				this.$refs.addref.validate(async (bo) => {
					if (bo) {
						if (this.cards.yzm == this.cards.zyzm) {
							//关闭添加对话框
							this.threeDialog = false;
							this.cards.userid = window.sessionStorage.getItem("userid");
							var res = await this.$http.post('addCard', qs.stringify(this.cards));
							// 处理返回值信息，并给出不同的信息提示
							if (res.data.code == 400) { // 添加失败
								this.$message.error(res.data.message);
							} else {
								this.$message.success(res.data.message);
							}
							console.log(this.cards)
							this.cards = '';
						} else {
							this.$message.error("验证码不正确")
						}
					} else {
						this.$message.error('格式不合法');
					}
				})
			},
			// 获取验证码
			async fa() {
				var pa = new URLSearchParams()
				pa.append("phone", this.cards.phone)
				var res = await this.$http.post('phoneYZ', pa);
				this.cards.zyzm = res.data.message;
				this.$message.success('验证码已发送！');
				this.threeDialog = true
			}

		},
		mounted() {
			this.selectAccountType()
		},
	};
</script>

<style scoped="scoped">
	* {
		padding: 0;
		margin: 0;
	}

	.page-header {
		padding-bottom: 9px;
		margin: 40px 0 20px;
		border-bottom: 1px solid #eee;
	}

	.box-card {
		margin: 0 auto;
		padding-top: 20px;
		width: 100%;
		font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
		font-size: 22px;
	}

	.zj {
		padding-bottom: 9px;
		margin: 40px 0 20px;
		border-bottom: 1px solid #eee;
	}

	.el-col {
		margin-top: 30px;
		font-size: 18px;
		padding-bottom: 40px;
	}

	h2 {
		padding: 10px;
		font-size: 30px;
	}

	#footer {
		padding: 15px 0;
		background: #fff;
		border-top: 1px solid #ddd;
		text-align: center;
		font-size: 14px;
	}

	a {
		color: #337ab7;
		text-decoration: none;
	}

	.el-radio-button__inner {
		border: none !important;
	}

	.el-image {
		width: 240px !important;
		height: 150px !important;
	}
</style>
